@import "~sassline/assets/sass/sassline-base/_variables.scss";
@import "~sassline/assets/sass/sassline-base/_mixins.scss";

.ds--columns {
  display: flex;
  flex-wrap: wrap;
  margin-left: -(map-get($gutterwidths, medium) / 2 - 1rem);
  margin-right: -(map-get($gutterwidths, medium) / 2 - 1rem);
  box-sizing: border-box;
  justify-content: space-between;

  &[data-ds--columns="1"] >* {width: calc(100%/1 - ((1rem - 1rem) / 1));}
  &[data-ds--columns="1"] >* {width: -webkit-calc(100%/1 - ((1rem - 1rem) / 1));}
  &[data-ds--columns="2"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
  &[data-ds--columns="2"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
  &[data-ds--columns="3"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
  &[data-ds--columns="3"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
  &[data-ds--columns="4"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
  &[data-ds--columns="4"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
  &[data-ds--columns="5"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
  &[data-ds--columns="5"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
  &[data-ds--columns="6"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
  &[data-ds--columns="6"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}

  @include breakpoint(break-1) {
    &[data-ds--columns="1"] >* {width: calc(100%/1 - ((1rem - 1rem) / 1));}
    &[data-ds--columns="1"] >* {width: -webkit-calc(100%/1 - ((1rem - 1rem) / 1));}
    &[data-ds--columns="2"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
    &[data-ds--columns="2"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
    &[data-ds--columns="3"] >* {width: calc(100%/3 - ((3rem - 1rem) / 3));}
    &[data-ds--columns="3"] >* {width: -webkit-calc(100%/3 - ((3rem - 1rem) / 3));}
    &[data-ds--columns="4"] >* {width: calc(100%/3 - ((3rem - 1rem) / 3));}
    &[data-ds--columns="4"] >* {width: -webkit-calc(100%/3 - ((3rem - 1rem) / 3));}
    &[data-ds--columns="5"] >* {width: calc(100%/3 - ((3rem - 1rem) / 3));}
    &[data-ds--columns="5"] >* {width: -webkit-calc(100%/3 - ((3rem - 1rem) / 3));}
    &[data-ds--columns="6"] >* {width: calc(100%/3 - ((3rem - 1rem) / 3));}
    &[data-ds--columns="6"] >* {width: -webkit-calc(100%/3 - ((3rem - 1rem) / 3));}
  }

  @include breakpoint(break-2) {
    &[data-ds--columns="1"] >* {width: calc(100%/1 - ((1rem - 1rem) / 1));}
    &[data-ds--columns="1"] >* {width: -webkit-calc(100%/1 - ((1rem - 1rem) / 1));}
    &[data-ds--columns="2"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
    &[data-ds--columns="2"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
    &[data-ds--columns="3"] >* {width: calc(100%/3 - ((3rem - 1rem) / 3));}
    &[data-ds--columns="3"] >* {width: -webkit-calc(100%/3 - ((3rem - 1rem) / 3));}
    &[data-ds--columns="4"] >* {width: calc(100%/4 - ((4rem - 1rem) / 4));}
    &[data-ds--columns="4"] >* {width: -webkit-calc(100%/4 - ((4rem - 1rem) / 4));}
    &[data-ds--columns="5"] >* {width: calc(100%/5 - ((5rem - 1rem) / 5));}
    &[data-ds--columns="5"] >* {width: -webkit-calc(100%/5 - ((5rem - 1rem) / 5));}
    &[data-ds--columns="6"] >* {width: calc(100%/5 - ((5rem - 1rem) / 5));}
    &[data-ds--columns="6"] >* {width: -webkit-calc(100%/5 - ((5rem - 1rem) / 5));}
  }

  @include breakpoint(break-3) {
    &[data-ds--columns="1"] >* {width: calc(100%/1 - ((1rem - 1rem) / 1));}
    &[data-ds--columns="1"] >* {width: -webkit-calc(100%/1 - ((1rem - 1rem) / 1));}
    &[data-ds--columns="2"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
    &[data-ds--columns="2"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
    &[data-ds--columns="3"] >* {width: calc(100%/3 - ((3rem - 1rem) / 3));}
    &[data-ds--columns="3"] >* {width: -webkit-calc(100%/3 - ((3rem - 1rem) / 3));}
    &[data-ds--columns="4"] >* {width: calc(100%/4 - ((4rem - 1rem) / 4));}
    &[data-ds--columns="4"] >* {width: -webkit-calc(100%/4 - ((4rem - 1rem) / 4));}
    &[data-ds--columns="5"] >* {width: calc(100%/5 - ((5rem - 1rem) / 5));}
    &[data-ds--columns="5"] >* {width: -webkit-calc(100%/5 - ((5rem - 1rem) / 5));}
    &[data-ds--columns="6"] >* {width: calc(100%/6 - ((6rem - 1rem) / 6));}
    &[data-ds--columns="6"] >* {width: -webkit-calc(100%/6 - ((6rem - 1rem) / 6));}
  }

  .ds--column {
    box-sizing: border-box;
    padding: 0 (map-get($gutterwidths, medium) / 2) map-get($gutterwidths, medium - 1rem);
    overflow-x: hidden;
    background: white;
    margin-bottom: 1rem;

    h1, h2, h3, h4, h5, h6 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}




